<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

	<title>Centaurus - Bootstrap Admin Template</title>
	
	<!-- bootstrap -->
	<link rel="stylesheet" type="text/css" href="css/bootstrap/bootstrap.min.css" />
	
	<!-- RTL support - for demo only -->
	<script src="js/demo-rtl.js"></script>
	<!-- 
	If you need RTL support just include here RTL CSS file <link rel="stylesheet" type="text/css" href="css/libs/bootstrap-rtl.min.css" />
	And add "rtl" class to <body> element - e.g. <body class="rtl"> 
	-->
	
	<!-- libraries -->
	<link rel="stylesheet" type="text/css" href="css/libs/font-awesome.css" />
	<link rel="stylesheet" type="text/css" href="css/libs/nanoscroller.css" />

	<!-- global styles -->
	<link rel="stylesheet" type="text/css" href="css/compiled/theme_styles.css" />

	<!-- this page specific styles -->
	<link rel="stylesheet" href="css/libs/morris.css" type="text/css" />
	<link rel="stylesheet" href="css/libs/daterangepicker.css" type="text/css" />
	
	<!-- Favicon -->
	<link type="image/x-icon" href="favicon.png" rel="shortcut icon"/>

	<!-- google font libraries -->
	<link href='//fonts.googleapis.com/css?family=Open+Sans:400,600,700,300|Titillium+Web:200,300,400' rel='stylesheet' type='text/css'>

	<!--[if lt IE 9]>
		<script src="js/html5shiv.js"></script>
		<script src="js/respond.min.js"></script>
	<![endif]-->
</head>
<body>
	<div id="theme-wrapper">
		<header class="navbar" id="header-navbar">
			<div class="container">
				<a href="index.html" id="logo" class="navbar-brand">
					<img src="img/logo.png" alt="" class="normal-logo logo-white"/>
					<img src="img/logo-black.png" alt="" class="normal-logo logo-black"/>
					<img src="img/logo-small.png" alt="" class="small-logo hidden-xs hidden-sm hidden"/>
				</a>
				
				<div class="clearfix">
				<button class="navbar-toggle" data-target=".navbar-ex1-collapse" data-toggle="collapse" type="button">
					<span class="sr-only">Toggle navigation</span>
					<span class="fa fa-bars"></span>
				</button>
				
				<div class="nav-no-collapse navbar-left pull-left hidden-sm hidden-xs">
					<ul class="nav navbar-nav pull-left">
						<li>
							<a class="btn" id="make-small-nav">
								<i class="fa fa-bars"></i>
							</a>
						</li>
					</ul>
				</div>
				
				<div class="nav-no-collapse pull-right" id="header-nav">
					<ul class="nav navbar-nav pull-right">
						<li class="mobile-search">
							<a class="btn">
								<i class="fa fa-search"></i>
							</a>
							
							<div class="drowdown-search">
								<form role="search">
									<div class="form-group">
										<input type="text" class="form-control" placeholder="Search...">
										<i class="fa fa-search nav-search-icon"></i>
									</div>
								</form>
							</div>
							
						</li>
						<li class="dropdown hidden-xs">
							<a class="btn dropdown-toggle" data-toggle="dropdown">
								<i class="fa fa-warning"></i>
								<span class="count">8</span>
							</a>
							<ul class="dropdown-menu notifications-list">
								<li class="pointer">
									<div class="pointer-inner">
										<div class="arrow"></div>
									</div>
								</li>
								<li class="item-header">You have 6 new notifications</li>
								<li class="item">
									<a href="#">
										<i class="fa fa-comment"></i>
										<span class="content">New comment on ‘Awesome P...</span>
										<span class="time"><i class="fa fa-clock-o"></i>13 min.</span>
									</a>
								</li>
								<li class="item">
									<a href="#">
										<i class="fa fa-plus"></i>
										<span class="content">New user registration</span>
										<span class="time"><i class="fa fa-clock-o"></i>13 min.</span>
									</a>
								</li>
								<li class="item">
									<a href="#">
										<i class="fa fa-envelope"></i>
										<span class="content">New Message from George</span>
										<span class="time"><i class="fa fa-clock-o"></i>13 min.</span>
									</a>
								</li>
								<li class="item">
									<a href="#">
										<i class="fa fa-shopping-cart"></i>
										<span class="content">New purchase</span>
										<span class="time"><i class="fa fa-clock-o"></i>13 min.</span>
									</a>
								</li>
								<li class="item">
									<a href="#">
										<i class="fa fa-eye"></i>
										<span class="content">New order</span>
										<span class="time"><i class="fa fa-clock-o"></i>13 min.</span>
									</a>
								</li>
								<li class="item-footer">
									<a href="#">
										View all notifications
									</a>
								</li>
							</ul>
						</li>
						<li class="dropdown hidden-xs">
							<a class="btn dropdown-toggle" data-toggle="dropdown">
								<i class="fa fa-envelope-o"></i>
								<span class="count">16</span>
							</a>
							<ul class="dropdown-menu notifications-list messages-list">
								<li class="pointer">
									<div class="pointer-inner">
										<div class="arrow"></div>
									</div>
								</li>
								<li class="item first-item">
									<a href="#">
										<img src="img/samples/messages-photo-1.png" alt=""/>
										<span class="content">
											<span class="content-headline">
												George Clooney
											</span>
											<span class="content-text">
												Look, just because I don't be givin' no man a foot massage don't make it 
												right for Marsellus to throw...
											</span>
										</span>
										<span class="time"><i class="fa fa-clock-o"></i>13 min.</span>
									</a>
								</li>
								<li class="item">
									<a href="#">
										<img src="img/samples/messages-photo-2.png" alt=""/>
										<span class="content">
											<span class="content-headline">
												Emma Watson
											</span>
											<span class="content-text">
												Look, just because I don't be givin' no man a foot massage don't make it 
												right for Marsellus to throw...
											</span>
										</span>
										<span class="time"><i class="fa fa-clock-o"></i>13 min.</span>
									</a>
								</li>
								<li class="item">
									<a href="#">
										<img src="img/samples/messages-photo-3.png" alt=""/>
										<span class="content">
											<span class="content-headline">
												Robert Downey Jr.
											</span>
											<span class="content-text">
												Look, just because I don't be givin' no man a foot massage don't make it 
												right for Marsellus to throw...
											</span>
										</span>
										<span class="time"><i class="fa fa-clock-o"></i>13 min.</span>
									</a>
								</li>
								<li class="item-footer">
									<a href="#">
										View all messages
									</a>
								</li>
							</ul>
						</li>
						<li class="hidden-xs">
							<a class="btn">
								<i class="fa fa-cog"></i>
							</a>
						</li>
						<li class="dropdown profile-dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">
								<img src="img/samples/scarlet-159.png" alt=""/>
								<span class="hidden-xs">Scarlett Johansson</span> <b class="caret"></b>
							</a>
							<ul class="dropdown-menu">
								<li><a href="user-profile.html"><i class="fa fa-user"></i>Profile</a></li>
								<li><a href="#"><i class="fa fa-cog"></i>Settings</a></li>
								<li><a href="#"><i class="fa fa-envelope-o"></i>Messages</a></li>
								<li><a href="#"><i class="fa fa-power-off"></i>Logout</a></li>
							</ul>
						</li>
						<li class="hidden-xxs">
							<a class="btn">
								<i class="fa fa-power-off"></i>
							</a>
						</li>
					</ul>
				</div>
				</div>
			</div>
		</header>
		<div id="page-wrapper" class="container">
			<div class="row">
				<div id="nav-col">
					<section id="col-left" class="col-left-nano">
						<div id="col-left-inner" class="col-left-nano-content">
							<div id="user-left-box" class="clearfix hidden-sm hidden-xs">
								<img alt="" src="img/samples/scarlet-159.png" />
								<div class="user-box">
									<span class="name">
										Welcome<br/>
										Scarlett
									</span>
									<span class="status">
										<i class="fa fa-circle"></i> Online
									</span>
								</div>
							</div>
							<div class="collapse navbar-collapse navbar-ex1-collapse" id="sidebar-nav">	
								<ul class="nav nav-pills nav-stacked">
									<li>
										<a href="index.html">
											<i class="fa fa-dashboard"></i>
											<span>Dashboard</span>
											<span class="label label-info label-circle pull-right">28</span>
										</a>
									</li>
									<li>
										<a href="#" class="dropdown-toggle">
											<i class="fa fa-table"></i>
											<span>Tables</span>
											<i class="fa fa-chevron-circle-right drop-icon"></i>
										</a>
										<ul class="submenu">
											<li>
												<a href="tables.html">
													Simple
												</a>
											</li>
											<li>
												<a href="tables-advanced.html">
													Advanced
												</a>
											</li>
											<li>
												<a href="users.html">
													Users
												</a>
											</li>
										</ul>
									</li>
									<li>
										<a href="#" class="dropdown-toggle">
											<i class="fa fa-envelope"></i>
											<span>Email</span>
											<i class="fa fa-chevron-circle-right drop-icon"></i>
										</a>
										<ul class="submenu">
											<li>
												<a href="email-inbox.html">
													Inbox
												</a>
											</li>
											<li>
												<a href="email-detail.html">
													Detail
												</a>
											</li>
											<li>
												<a href="email-compose.html">
													Compose
												</a>
											</li>
										</ul>
									</li>
									<li>
										<a href="#" class="dropdown-toggle">
											<i class="fa fa-bar-chart-o"></i>
											<span>Graphs</span>
											<i class="fa fa-chevron-circle-right drop-icon"></i>
										</a>
										<ul class="submenu">
											<li>
												<a href="graphs-morris.html">
													Morris &amp; Mixed
												</a>
											</li>
											<li>
												<a href="graphs-flot.html">
													Flot
												</a>
											</li>
											<li>
												<a href="graphs-dygraphs.html">
													Dygraphs
												</a>
											</li>
											<li>
												<a href="graphs-xcharts.html">
													xCharts
												</a>
											</li>
										</ul>
									</li>
									<li class="active">
										<a href="widgets.html">
											<i class="fa fa-th-large"></i>
											<span>Widgets</span>
											<span class="label label-success pull-right">New</span>
										</a>
									</li>
									<li>
										<a href="#" class="dropdown-toggle">
											<i class="fa fa-desktop"></i>
											<span>Pages</span>
											<i class="fa fa-chevron-circle-right drop-icon"></i>
										</a>
										<ul class="submenu">
											<li>
												<a href="calendar.html">
													Calendar
												</a>
											</li>
											<li>
												<a href="gallery.html">
													Gallery
												</a>
											</li>
											<li>
												<a href="gallery-v2.html">
													Gallery v2
												</a>
											</li>
											<li>
												<a href="pricing.html">
													Pricing
												</a>
											</li>
											<li>
												<a href="projects.html">
													Projects
												</a>
											</li>
											<li>
												<a href="team-members.html">
													Team Members
												</a>
											</li>
											<li>
												<a href="timeline.html">
													Timeline
												</a>
											</li>
											<li>
												<a href="timeline-grid.html">
													Timeline Grid
												</a>
											</li>
											<li>
												<a href="user-profile.html">
													User Profile
												</a>
											</li>
											<li>
												<a href="search.html">
													Search Results
												</a>
											</li>
											<li>
												<a href="invoice.html">
													Invoice
												</a>
											</li>
											<li>
												<a href="intro.html">
													Tour Layout
												</a>
											</li>
										</ul>
									</li>
									<li>
										<a href="#" class="dropdown-toggle">
											<i class="fa fa-edit"></i>
											<span>Forms</span>
											<i class="fa fa-chevron-circle-right drop-icon"></i>
										</a>
										<ul class="submenu">
											<li>
												<a href="form-elements.html">
													Elements
												</a>
											</li>
											<li>
												<a href="x-editable.html">
													X-Editable
												</a>
											</li>
											<li>
												<a href="form-wizard.html">
													Wizard
												</a>
											</li>
											<li>
												<a href="form-wizard-popup.html">
													Wizard popup
												</a>
											</li>
											<li>
												<a href="form-wysiwyg.html">
													WYSIWYG
												</a>
											</li>
											<li>
												<a href="form-summernote.html">
													WYSIWYG Summernote
												</a>
											</li>
											<li>
												<a href="form-ckeditor.html">
													WYSIWYG CKEditor
												</a>
											</li>
											<li>
												<a href="form-dropzone.html">
													Multiple File Upload
												</a>
											</li>
										</ul>
									</li>
									<li>
										<a href="#" class="dropdown-toggle">
											<i class="fa fa-desktop"></i>
											<span>UI Kit</span>
											<i class="fa fa-chevron-circle-right drop-icon"></i>
										</a>
										<ul class="submenu">
											<li>
												<a href="ui-elements.html">
													Elements
												</a>
											</li>
											<li>
												<a href="notifications.html">
													Notifications &amp; Alerts
												</a>
											</li>
											<li>
												<a href="modals.html">
													Modals
												</a>
											</li>
											<li>
												<a href="video.html">
													Video
												</a>
											</li>
											<li>
												<a href="#" class="dropdown-toggle">
													Icons
													<i class="fa fa-chevron-circle-right drop-icon"></i>
												</a>
												<ul class="submenu">
													<li>
														<a href="icons-awesome.html">
															Awesome Icons
														</a>
													</li>
													<li>
														<a href="icons-halflings.html">
															Halflings Icons
														</a>
													</li>
												</ul>
											</li>
											<li>
												<a href="ui-nestable.html">
													Nestable List
												</a>
											</li>
											<li>
												<a href="typography.html">
													Typography
												</a>
											</li>
											<li>
												<a href="#" class="dropdown-toggle">
													3 Level Menu
													<i class="fa fa-chevron-circle-right drop-icon"></i>
												</a>
												<ul class="submenu">
													<li>
														<a href="#">
															3rd Level
														</a>
													</li>
													<li>
														<a href="#">
															3rd Level
														</a>
													</li>
													<li>
														<a href="#">
															3rd Level
														</a>
													</li>
												</ul>
											</li>
										</ul>
									</li>
									<li>
										<a href="maps.html">
											<i class="fa fa-map-marker"></i>
											<span>Google Maps</span>
											<span class="label label-danger pull-right">Updated</span>
										</a>
									</li>
									<li>
										<a href="#" class="dropdown-toggle">
											<i class="fa fa-file-text-o"></i>
											<span>Extra pages</span>
											<i class="fa fa-chevron-circle-right drop-icon"></i>
										</a>
										<ul class="submenu">
											<li>
												<a href="faq.html">
													FAQ
												</a>
											</li>
											<li>
												<a href="emails.html">
													Email Templates
												</a>
											</li>
											<li>
												<a href="login.html">
													Login
												</a>
											</li>
											<li>
												<a href="login-full.html">
													Login Full
												</a>
											</li>
											<li>
												<a href="registration.html">
													Registration
												</a>
											</li>
											<li>
												<a href="registration-full.html">
													Registration Full
												</a>
											</li>
											<li>
												<a href="forgot-password.html">
													Forgot Password
												</a>
											</li>
											<li>
												<a href="forgot-password-full.html">
													Forgot Password Full
												</a>
											</li>
											<li>
												<a href="lock-screen.html">
													Lock Screen
												</a>
											</li>
											<li>
												<a href="lock-screen-full.html">
													Lock Screen Full
												</a>
											</li>
											<li>
												<a href="error-404.html">
													Error 404
												</a>
											</li>
											<li>
												<a href="error-404-v2.html">
													Error 404 Nested
												</a>
											</li>
											<li>
												<a href="error-500.html">
													Error 500
												</a>
											</li>
											<li>
												<a href="extra-grid.html">
													Grid
												</a>
											</li>
										</ul>
									</li>
								</ul>
							</div>
						</div>
					</section>
				</div>
				<div id="content-wrapper">
					<div class="row">
						<div class="col-lg-12">
							
							<div class="row">
								<div class="col-lg-12">
									<ol class="breadcrumb">
										<li><a href="#">Home</a></li>
										<li class="active"><span>Widgets</span></li>
									</ol>
									
									<h1>Widgets</h1>
								</div>
							</div>
							
							<div class="row">
								<div class="col-lg-5 col-md-8 col-sm-12 col-xs-12">
									<div class="main-box">
										<div class="clearfix">
											<div class="infographic-box merged merged-top pull-left">
												<i class="fa fa-user purple-bg"></i>
												<span class="value purple">2.562</span>
												<span class="headline">Users</span>
											</div>
											<div class="infographic-box merged merged-top merged-right pull-left">
												<i class="fa fa-money green-bg"></i>
												<span class="value green">&dollar;12.400</span>
												<span class="headline">Income</span>
											</div>
										</div>
										<div class="clearfix">
											<div class="infographic-box merged pull-left">
												<i class="fa fa-eye yellow-bg"></i>
												<span class="value yellow">12.526</span>
												<span class="headline">Monthly Visits</span>
											</div>
											<div class="infographic-box merged merged-right pull-left">
												<i class="fa fa-globe red-bg"></i>
												<span class="value red">28</span>
												<span class="headline">Countries</span>
											</div>
										</div>
									</div>
								</div>
								
								<div class="col-md-4 col-sm-6 col-xs-12">
									<div class="main-box small-graph-box red-bg">
										<span class="value">2.562</span>
										<span class="headline">Users</span>
										<div class="progress">
											<div style="width: 60%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="60" role="progressbar" class="progress-bar">
												<span class="sr-only">60% Complete</span>
											</div>
										</div>
										<span class="subinfo">
											<i class="fa fa-arrow-circle-o-up"></i> 10% higher than last week
										</span>
										<span class="subinfo">
											<i class="fa fa-users"></i> 29 new users
										</span>
									</div>
								</div>
							
								<div class="col-lg-3 col-sm-6 col-xs-12">
									<div class="main-box infographic-box">
										<i class="fa fa-shopping-cart emerald-bg"></i>
										<span class="headline">Purchases</span>
										<span class="value">658</span>
									</div>
								</div>
								
							</div>
							
							<div class="row">
								<div class="col-md-9 col-lg-10">
									<div class="main-box">
										<div class="row">
											<div class="col-md-9">
												<div class="graph-box emerald-bg">
													<h2>Sales &amp; Earnings</h2>
													<div class="graph" id="graph-line" style="max-height: 335px;"></div>
												</div>
											</div>
											<div class="col-md-3">
												<div class="row graph-nice-legend">
													<div class="graph-legend-row col-md-12 col-sm-4">
														<div class="graph-legend-row-inner">
															<span class="graph-legend-name">
																Earnings
															</span>
															<span class="graph-legend-value">
																&dollar;94.382
															</span>
														</div>
													</div>
													<div class="graph-legend-row col-md-12 col-sm-4">
														<div class="graph-legend-row-inner">
															<span class="graph-legend-name">
																Orders
															</span>
															<span class="graph-legend-value">
																3.930
															</span>
														</div>
													</div>
													<div class="graph-legend-row col-md-12 col-sm-4">
														<div class="graph-legend-row-inner">
															<span class="graph-legend-name">
																New Clients
															</span>
															<span class="graph-legend-value">
																894
															</span>
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
								
								<div class="col-md-3 col-lg-2">
									<div class="social-box-wrapper">
										<div class="social-box col-md-12 col-sm-4 facebook">
											<i class="fa fa-facebook"></i>
											<div class="clearfix">
												<span class="social-count">184k</span>
												<span class="social-action">likes</span>
											</div>
											<span class="social-name">facebook</span>
										</div>
										<div class="social-box col-md-12 col-sm-4 twitter">
											<i class="fa fa-twitter"></i>
											<div class="clearfix">
												<span class="social-count">49k</span>
												<span class="social-action">tweets</span>
											</div>
											<span class="social-name">twitter</span>
										</div>
										<div class="social-box col-md-12 col-sm-4 google">
											<i class="fa fa-google-plus"></i>
											<div class="clearfix">
												<span class="social-count">1 204</span>
												<span class="social-action">circles</span>
											</div>
											<span class="social-name">google+</span>
										</div>
									</div>
								</div>
							</div>
							
							<div class="row">
								<div class="col-lg-4 col-md-5 col-sm-6">
									<div class="main-box clearfix profile-box">
										<div class="main-box-body clearfix">
											<div class="profile-box-header">
												<img src="img/samples/scarlet-159.png" alt="" class="profile-img img-responsive center-block" />
												<h2>Scarlett Johansson</h2>
												<div class="job-position">
													Actress
												</div>
											</div>
											
											<div class="profile-box-footer clearfix">
												<a href="#">
													<span class="value">854</span>
													<span class="label">Followers</span>
												</a>
												<a href="#">
													<span class="value">72</span>
													<span class="label">Following</span>
												</a>
												<a href="#">
													<span class="value">128</span>
													<span class="label">Friends</span>
												</a>
											</div>
										</div>
									</div>
								</div>
								
								<div class="col-lg-4 col-md-5 col-sm-6">
									<div class="main-box clearfix profile-box-stats">
										<div class="main-box-body clearfix">
											<div class="profile-box-header purple-bg clearfix">
												<h2>Robert Downey Jr.</h2>
												<div class="job-position">
													Actress
												</div>
												<img src="img/samples/robert-300.jpg" alt="" class="profile-img img-responsive" />
											</div>
											
											<div class="profile-box-footer clearfix">
												<a href="#">
													<span class="value">783</span>
													<span class="label">Messages</span>
												</a>
												<a href="#">
													<span class="value">912</span>
													<span class="label">Sales</span>
												</a>
												<a href="#">
													<span class="value">83</span>
													<span class="label">Projects</span>
												</a>
											</div>
										</div>
									</div>
								</div>
								
								<div class="col-lg-4 col-md-5 col-sm-6">
									<div class="main-box clearfix profile-box-menu">
										<div class="main-box-body clearfix">
											<div class="profile-box-header green-bg clearfix">
												<img src="img/samples/angelina-300.jpg" alt="" class="profile-img img-responsive" />
												<h2>Angelina<br/>Jolie</h2>
												<div class="job-position">
													Actress
												</div>
											</div>
											
											<div class="profile-box-content clearfix">
												<ul class="menu-items">
													<li>
														<a href="#" class="clearfix">
															<i class="fa fa-bell-o fa-lg"></i> New notifications
															<span class="label label-danger label-circle pull-right">82</span>
														</a>
													</li>
													<li>
														<a href="#" class="clearfix">
															<i class="fa fa-user fa-lg"></i> Edit profile
															<span class="label label-success label-circle pull-right">13</span>
														</a>
													</li>
													<li>
														<a href="#" class="clearfix">
															<i class="fa fa-calendar fa-lg"></i> Calendar
															<span class="label label-warning label-circle pull-right">12</span>
														</a>
													</li>
													<li>
														<a href="#" class="clearfix">
															<i class="fa fa-envelope fa-lg"></i> New message
															<span class="label label-primary label-circle pull-right">44</span>
														</a>
													</li>
												</ul>
											</div>
										</div>
									</div>
								</div>
								
							</div>
							
							<div class="row">
								<div class="col-lg-6">
									<div class="main-box clearfix">
										<header class="main-box-header clearfix">
											<h2>Conversation</h2>
										</header>
										
										<div class="main-box-body clearfix">
											<div class="conversation-wrapper">
												<div class="conversation-content">
													<div class="conversation-inner">
													
														<div class="conversation-item item-left clearfix">
															<div class="conversation-user">
																<img src="img/samples/ryan.png" alt=""/>
															</div>
															<div class="conversation-body">
																<div class="name">
																	Ryan Gossling
																</div>
																<div class="time hidden-xs">
																	September 21, 2013 18:28
																</div>
																<div class="text">
																	I don't think they tried to market it to the billionaire, spelunking, 
																	base-jumping crowd.
																</div>
															</div>
														</div>
														<div class="conversation-item item-right clearfix">
															<div class="conversation-user">
																<img src="img/samples/kunis.png" alt=""/>
															</div>
															<div class="conversation-body">
																<div class="name">
																	Mila Kunis
																</div>
																<div class="time hidden-xs">
																	September 21, 2013 12:45
																</div>
																<div class="text">
																	The path of the righteous man is beset on all sides by the iniquities of the 
																	selfish and the tyranny of evil men. Blessed is he who, in the name of charity and 
																	good will.
																</div>
															</div>
														</div>
														<div class="conversation-item item-right clearfix">
															<div class="conversation-user">
																<img src="img/samples/kunis.png" alt=""/>
															</div>
															<div class="conversation-body">
																<div class="name">
																	Mila Kunis
																</div>
																<div class="time hidden-xs">
																	September 21, 2013 12:45
																</div>
																<div class="text">
																	The path of the righteous man is beset on all sides by the iniquities of the 
																	selfish and the tyranny of evil men. Blessed is he who, in the name of charity and 
																	good will.
																</div>
															</div>
														</div>
														<div class="conversation-item item-left clearfix">
															<div class="conversation-user">
																<img src="img/samples/ryan.png" alt=""/>
															</div>
															<div class="conversation-body">
																<div class="name">
																	Ryan Gossling
																</div>
																<div class="time hidden-xs">
																	September 21, 2013 18:28
																</div>
																<div class="text">
																	I don't think they tried to market it to the billionaire, spelunking, 
																	base-jumping crowd.
																</div>
															</div>
														</div>
														<div class="conversation-item item-right clearfix">
															<div class="conversation-user">
																<img src="img/samples/kunis.png" alt=""/>
															</div>
															<div class="conversation-body">
																<div class="name">
																	Mila Kunis
																</div>
																<div class="time hidden-xs">
																	September 21, 2013 12:45
																</div>
																<div class="text">
																	The path of the righteous man is beset on all sides by the iniquities of the 
																	selfish and the tyranny of evil men. Blessed is he who, in the name of charity and 
																	good will.
																</div>
															</div>
														</div>
														<div class="conversation-item item-right clearfix">
															<div class="conversation-user">
																<img src="img/samples/kunis.png" alt=""/>
															</div>
															<div class="conversation-body">
																<div class="name">
																	Mila Kunis
																</div>
																<div class="time hidden-xs">
																	September 21, 2013 12:45
																</div>
																<div class="text">
																	The path of the righteous man is beset on all sides by the iniquities of the 
																	selfish and the tyranny of evil men. Blessed is he who, in the name of charity and 
																	good will.
																</div>
															</div>
														</div>
														<div class="conversation-item item-left clearfix">
															<div class="conversation-user">
																<img src="img/samples/ryan.png" alt=""/>
															</div>
															<div class="conversation-body">
																<div class="name">
																	Ryan Gossling
																</div>
																<div class="time hidden-xs">
																	September 21, 2013 18:28
																</div>
																<div class="text">
																	I don't think they tried to market it to the billionaire, spelunking, 
																	base-jumping crowd.
																</div>
															</div>
														</div>
														<div class="conversation-item item-right clearfix">
															<div class="conversation-user">
																<img src="img/samples/kunis.png" alt=""/>
															</div>
															<div class="conversation-body">
																<div class="name">
																	Mila Kunis
																</div>
																<div class="time hidden-xs">
																	September 21, 2013 12:45
																</div>
																<div class="text">
																	The path of the righteous man is beset on all sides by the iniquities of the 
																	selfish and the tyranny of evil men. Blessed is he who, in the name of charity and 
																	good will.
																</div>
															</div>
														</div>
														
													</div>
												</div>
												<div class="conversation-new-message">
													<form>
														<div class="form-group">
															<textarea class="form-control" rows="2" placeholder="Enter your message..."></textarea>
														</div>
														
														<div class="clearfix">
															<button type="submit" class="btn btn-success pull-right">Send message</button>
														</div>
													</form>
												</div>
											</div> 
										</div>
									</div>
								</div>
								
								<div class="col-lg-6">
									<div class="main-box clearfix">
										<header class="main-box-header clearfix">
											<h2>Users</h2>
										</header>
										
										<div class="main-box-body clearfix">
										
											<ul class="widget-users row">
												<li class="col-md-6">
													<div class="img">
														<img src="img/samples/scarlet.png" alt=""/>
													</div>
													<div class="details">
														<div class="name">
															<a href="#">Scarlett Johansson</a>
														</div>
														<div class="time">
															<i class="fa fa-clock-o"></i> Last online: 5 minutes ago
														</div>
														<div class="type">
															<span class="label label-danger">Admin</span>
														</div>
													</div>
												</li>
												<li class="col-md-6">
													<div class="img">
														<img src="img/samples/kunis.png" alt=""/>
													</div>
													<div class="details">
														<div class="name">
															<a href="#">Mila Kunis</a>
														</div>
														<div class="time online">
															<i class="fa fa-check-circle"></i> Online
														</div>
														<div class="type">
															<span class="label label-warning">Pending</span>
														</div>
													</div>
												</li>
												<li class="col-md-6">
													<div class="img">
														<img src="img/samples/ryan.png" alt=""/>
													</div>
													<div class="details">
														<div class="name">
															<a href="#">Ryan Gossling</a>
														</div>
														<div class="time online">
															<i class="fa fa-check-circle"></i> Online
														</div>
													</div>
												</li>
												<li class="col-md-6">
													<div class="img">
														<img src="img/samples/robert.png" alt=""/>
													</div>
													<div class="details">
														<div class="name">
															<a href="#">Robert Downey Jr.</a>
														</div>
														<div class="time">
															<i class="fa fa-clock-o"></i> Last online: Thursday
														</div>
													</div>
												</li>
												<li class="col-md-6">
													<div class="img">
														<img src="img/samples/emma.png" alt=""/>
													</div>
													<div class="details">
														<div class="name">
															<a href="#">Emma Watson</a>
														</div>
														<div class="time">
															<i class="fa fa-clock-o"></i> Last online: 1 week ago
														</div>
													</div>
												</li>
												<li class="col-md-6">
													<div class="img">
														<img src="img/samples/george.png" alt=""/>
													</div>
													<div class="details">
														<div class="name">
															<a href="#">George Clooney</a>
														</div>
														<div class="time">
															<i class="fa fa-clock-o"></i> Last online: 1 month ago
														</div>
													</div>
												</li>
												<li class="col-md-6">
													<div class="img">
														<img src="img/samples/kunis.png" alt=""/>
													</div>
													<div class="details">
														<div class="name">
															<a href="#">Mila Kunis</a>
														</div>
														<div class="time online">
															<i class="fa fa-check-circle"></i> Online
														</div>
														<div class="type">
															<span class="label label-warning">Pending</span>
														</div>
													</div>
												</li>
												<li class="col-md-6">
													<div class="img">
														<img src="img/samples/ryan.png" alt=""/>
													</div>
													<div class="details">
														<div class="name">
															<a href="#">Ryan Gossling</a>
														</div>
														<div class="time online">
															<i class="fa fa-check-circle"></i> Online
														</div>
													</div>
												</li>
											</ul>
											
										</div>
									</div>
								</div>
							
							</div>
							<div class="row">
						
								<div class="col-lg-6">
									<div class="main-box clearfix">
										<header class="main-box-header clearfix">
											<h2>Products</h2>
										</header>
										
										<div class="main-box-body clearfix">
											<ul class="widget-products">
												<li>
													<a href="#">
														<span class="img">
															<img src="img/samples/ipad.png" alt=""/>
														</span>
														
														<span class="product clearfix">
															<span class="name">
																iPad mini 32GB WiFi Black&Slate
															</span>
															<span class="price">
																<i class="fa fa-money"></i> &dollar;320,00
															</span>
															<span class="warranty">
																<i class="fa fa-certificate"></i> Warranty: 2 years
															</span>
														</span>
													</a>
												</li>
												<li>
													<a href="#">
														<span class="img">
															<img src="img/samples/ipad.png" alt=""/>
														</span>
														
														<span class="product clearfix">
															<span class="name">
																iPad mini 16GB WiFi Black&Slate
															</span>
															<span class="price">
																<i class="fa fa-money"></i> &dollar;273,68
															</span>
															<span class="warranty">
																<i class="fa fa-certificate"></i> Warranty: 2 years
															</span>
														</span>
													</a>
												</li>
												<li>
													<a href="#">
														<span class="img">
															<img src="img/samples/ipad.png" alt=""/>
														</span>
														
														<span class="product clearfix">
															<span class="name">
																iPad mini 32GB WiFi Cellular Black&Slate
															</span>
															<span class="price">
																<i class="fa fa-money"></i> &dollar;447,29
															</span>
															<span class="warranty">
																<i class="fa fa-certificate"></i> Warranty: 4 years
															</span>
														</span>
													</a>
												</li>
												<li>
													<a href="#">
														<span class="img">
															<img src="img/samples/ipad.png" alt=""/>
														</span>
														
														<span class="product clearfix">
															<span class="name">
																iPad mini 32GB WiFi Cellular Black&Slate
															</span>
															<span class="price">
																<i class="fa fa-money"></i> &dollar;447,29
															</span>
															<span class="warranty">
																<i class="fa fa-certificate"></i> Warranty: 4 years
															</span>
														</span>
													</a>
												</li>
											</ul>
											
										</div>
									</div>
								</div>
								
								<div class="col-lg-6">
									<div class="main-box clearfix">
										<header class="main-box-header clearfix">
											<h2>Todo</h2>
										</header>
										
										<div class="main-box-body clearfix">
	
											<ul class="widget-todo">
												<li class="clearfix">
													<div class="name">
														<div class="checkbox-nice">
															<input type="checkbox" id="todo-1" />
															<label for="todo-1">
																New products introduction <span class="label label-danger">High Priority</span>
															</label>
														</div>
													</div>
												</li>
												<li class="clearfix">
													<div class="name">
														<div class="checkbox-nice">
															<input type="checkbox" id="todo-2" />
															<label for="todo-2">
																Checking the stock <span class="label label-success">Low Priority</span>
															</label>
														</div>
													</div>
													<div class="actions">
														<a href="#" class="table-link">
															<i class="fa fa-pencil"></i>
														</a>
														<a href="#" class="table-link danger">
															<i class="fa fa-trash-o"></i>
														</a>
													</div>
												</li>
												<li class="clearfix">
													<div class="name">
														<div class="checkbox-nice">
															<input type="checkbox" id="todo-3" checked="checked" />
															<label for="todo-3">
																Buying coffee <span class="label label-warning">Medium Priority</span>
															</label>
														</div>
													</div>
													<div class="actions">
														<a href="#" class="table-link">
															<i class="fa fa-pencil"></i>
														</a>
														<a href="#" class="table-link danger">
															<i class="fa fa-trash-o"></i>
														</a>
													</div>
												</li>
												<li class="clearfix">
													<div class="name">
														<div class="checkbox-nice">
															<input type="checkbox" id="todo-4" />
															<label for="todo-4">
																New marketing campaign <span class="label label-success">Low Priority</span>
															</label>
														</div>
													</div>
												</li>
												<li class="clearfix">
													<div class="name">
														<div class="checkbox-nice">
															<input type="checkbox" id="todo-5" />
															<label for="todo-5">
																Calling Mom <span class="label label-warning">Medium Priority</span>
															</label>
														</div>
													</div>
													<div class="actions">
														<a href="#" class="table-link badge">
															<i class="fa fa-cog"></i>
														</a>
													</div>
												</li>
												<li class="clearfix">
													<div class="name">
														<div class="checkbox-nice">
															<input type="checkbox" id="todo-6" />
															<label for="todo-6">
																Ryan's birthday <span class="label label-danger">High Priority</span>
															</label>
														</div>
													</div>
												</li>
												<li class="clearfix">
													<div class="name">
														<div class="checkbox-nice">
															<input type="checkbox" id="todo-7" />
															<label for="todo-7">
																Printing new flyer <span class="label label-success">Low Priority</span>
															</label>
														</div>
													</div>
												</li>
												<li class="clearfix">
													<div class="name">
														<div class="checkbox-nice">
															<input type="checkbox" id="todo-8" />
															<label for="todo-8">
																Mila and Ryan wedding <span class="label label-danger">High Priority</span>
															</label>
														</div>
													</div>
												</li>
												<li class="clearfix">
													<div class="name">
														<div class="checkbox-nice">
															<input type="checkbox" id="todo-9" />
															<label for="todo-9">
																Checking the stock <span class="label label-success">Low Priority</span>
															</label>
														</div>
													</div>
												</li>
											</ul>
												
										</div>
									</div>
								</div>
								
								
								
							</div>
							
						</div>
					</div>
					
					<footer id="footer-bar" class="row">
						<p id="footer-copyright" class="col-xs-12">
							&copy; 2014 <a href="http://www.adbee.sk/" target="_blank">Adbee digital</a>. Powered by Centaurus Theme.
						</p>
					</footer>
				</div>
			</div>
		</div>
	</div>
	
	<div id="config-tool" class="closed">
		<a id="config-tool-cog">
			<i class="fa fa-cog"></i>
		</a>
		
		<div id="config-tool-options">
			<h4>Layout Options</h4>
			<ul>
				<li>
					<div class="checkbox-nice">
						<input type="checkbox" id="config-fixed-header" />
						<label for="config-fixed-header">
							Fixed Header
						</label>
					</div>
				</li>
				<li>
					<div class="checkbox-nice">
						<input type="checkbox" id="config-fixed-sidebar" />
						<label for="config-fixed-sidebar">
							Fixed Left Menu
						</label>
					</div>
				</li>
				<li>
					<div class="checkbox-nice">
						<input type="checkbox" id="config-fixed-footer" />
						<label for="config-fixed-footer">
							Fixed Footer
						</label>
					</div>
				</li>
				<li>
					<div class="checkbox-nice">
						<input type="checkbox" id="config-boxed-layout" />
						<label for="config-boxed-layout">
							Boxed Layout
						</label>
					</div>
				</li>
				<li>
					<div class="checkbox-nice">
						<input type="checkbox" id="config-rtl-layout" />
						<label for="config-rtl-layout">
							Right-to-Left
						</label>
					</div>
				</li>
			</ul>
			<br/>
			<h4>Skin Color</h4>
			<ul id="skin-colors" class="clearfix">
				<li>
					<a class="skin-changer" data-skin="" data-toggle="tooltip" title="Default" style="background-color: #34495e;">
					</a>
				</li>
				<li>
					<a class="skin-changer" data-skin="theme-white" data-toggle="tooltip" title="White/Green" style="background-color: #2ecc71;">
					</a>
				</li>
				<li>
					<a class="skin-changer blue-gradient" data-skin="theme-blue-gradient" data-toggle="tooltip" title="Gradient">
					</a>
				</li>
				<li>
					<a class="skin-changer" data-skin="theme-turquoise" data-toggle="tooltip" title="Green Sea" style="background-color: #1abc9c;">
					</a>
				</li>
				<li>
					<a class="skin-changer" data-skin="theme-amethyst" data-toggle="tooltip" title="Amethyst" style="background-color: #9b59b6;">
					</a>
				</li>
				<li>
					<a class="skin-changer" data-skin="theme-blue" data-toggle="tooltip" title="Blue" style="background-color: #2980b9;">
					</a>
				</li>
				<li>
					<a class="skin-changer" data-skin="theme-red" data-toggle="tooltip" title="Red" style="background-color: #e74c3c;">
					</a>
				</li>
				<li>
					<a class="skin-changer" data-skin="theme-whbl" data-toggle="tooltip" title="White/Blue" style="background-color: #3498db;">
					</a>
				</li>
			</ul>
		</div>
	</div>

	<!-- global scripts -->
	<script src="js/demo-skin-changer.js"></script> <!-- only for demo -->
	
	<script src="js/jquery.js"></script>
	<script src="js/bootstrap.js"></script>
	<script src="js/jquery.nanoscroller.min.js"></script>
	
	<script src="js/demo.js"></script> <!-- only for demo -->
	
	<!-- this page specific scripts -->
	<script src="js/jquery-ui.custom.min.js"></script>
	<script src="js/fullcalendar.min.js"></script>
	<script src="js/jquery.slimscroll.min.js"></script>
	<script src="js/raphael-min.js"></script>
	<script src="js/morris.min.js"></script>
	<script src="js/moment.min.js"></script>
	<script src="js/daterangepicker.js"></script>
	<script src="js/jquery-jvectormap-1.2.2.min.js"></script>
	<script src="js/jquery-jvectormap-world-merc-en.js"></script>
	<script src="js/gdp-data.js"></script>
	<script src="js/flot/jquery.flot.js"></script>
	<script src="js/flot/jquery.flot.min.js"></script>
	<script src="js/flot/jquery.flot.pie.min.js"></script>
	<script src="js/flot/jquery.flot.stack.min.js"></script>
	<script src="js/flot/jquery.flot.resize.min.js"></script>
	<script src="js/flot/jquery.flot.time.min.js"></script>
	<script src="js/flot/jquery.flot.threshold.js"></script>
	
	<!-- theme scripts -->
	<script src="js/scripts.js"></script>
	<script src="js/pace.min.js"></script>
	
	<!-- this page specific inline scripts -->
	<script>
	$(document).ready(function() {
		
	    $('.conversation-inner').slimScroll({
	        height: '352px',
	        alwaysVisible: false,
	        railVisible: true,
	        wheelStep: 5,
	        allowPageScroll: false
	    });
		
	    //CHARTS
		graphLine = Morris.Line({
			element: 'graph-line',
			data: [
				{period: '2014-01-01', iphone: 2666, ipad: null, itouch: 2647},
				{period: '2014-01-02', iphone: 9778, ipad: 2294, itouch: 2441},
				{period: '2014-01-03', iphone: 4912, ipad: 1969, itouch: 2501},
				{period: '2014-01-04', iphone: 3767, ipad: 3597, itouch: 5689},
				{period: '2014-01-05', iphone: 6810, ipad: 1914, itouch: 2293},
				{period: '2014-01-06', iphone: 5670, ipad: 4293, itouch: 1881},
				{period: '2014-01-07', iphone: 4820, ipad: 3795, itouch: 1588},
				{period: '2014-01-08', iphone: 15073, ipad: 5967, itouch: 5175},
				{period: '2014-01-09', iphone: 10687, ipad: 4460, itouch: 2028},
				{period: '2014-01-10', iphone: 8432, ipad: 5713, itouch: 1791}
			],
			lineColors: ['#ffffff'],
			xkey: 'period',
			ykeys: ['iphone'],
			labels: ['iPhone'],
			pointSize: 3,
			hideHover: 'auto',
			gridTextColor: '#ffffff',
			gridLineColor: 'rgba(255, 255, 255, 0.3)',
			resize: true
		});
	});
	</script>
	
</body>
</html>